<template>
  <div class="mainDiv">
    <el-container class="main_container">
      <el-main>
        <el-card class="mb10">
          <div slot="header" class="clearfix">
            <span>申请信息</span>
          </div>
          <el-form ref="form" :model="form" :rules="rules" label-width="110px">
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="申请单位" prop="deptId">
                  <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择申请单位"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="申请人" prop="name">
                  <el-select v-model="form.name" placeholder="请选择申请人" @change="getUserMobile" clearable>
                    <el-option v-for="item in contactsOptions" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系电话" prop="tel">
                  <el-input v-model="form.tel" placeholder="请输入联系电话"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15" v-if="form.delivery == '0'">
              <el-col>
                <el-form-item label="联系地址" prop="address">
                  <el-input type="textarea" v-model="form.address" placeholder="请输入联系地址"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="8">
                <el-form-item label="出库仓库" prop="storeId">
                  <treeselect v-model="form.storeId" :options="storeOptions" :show-count="true" placeholder="请选择仓库"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="物流配送" prop="delivery">
                  <el-radio-group v-model="form.delivery">
                    <el-radio v-for="dict in dict.type.oms_out_delivery_type" :key="dict.value" :label="dict.value">
                      {{dict.label}}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                <el-form-item label="是否拖车" prop="isTrailer">
                  <el-radio-group v-model="form.isTrailer">
                    <el-radio label="1">是</el-radio>
                    <el-radio label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col> -->
             <!-- <el-col :span="6">
                <el-form-item label="出库类型" prop="propertyType">
                  <el-radio-group v-model="form.propertyType">
                    <el-radio v-for="dict in dict.type.wms_ex_warehouse_type" v-if="dict.value == 2" :key="dict.value" :label="dict.value">
                      {{dict.label}}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col> -->
              <!-- <el-col :span="6">
                <el-form-item label="申请时间" prop="requestTime">
                  <el-date-picker clearable  v-model="form.requestTime" type="date" value-format="yyyy-MM-dd HH:mm:ss"placeholder="请选择日期" />
                </el-form-item>
              </el-col> -->
            </el-row>
            <el-row :gutter="15">
              <el-col>
                <el-form-item label="调用原因" prop="dispatchRemark">
                  <el-input type="textarea" v-model="form.dispatchRemark" placeholder="请输入申请备注"/>
                </el-form-item>
              </el-col>
            </el-row>
           <!-- <el-row :gutter="15">
              <el-col>
                <el-form-item label="出库原因" prop="remark">
                  <el-input type="textarea" v-model="form.remark" placeholder="请输入申请备注"/>
                </el-form-item>
              </el-col>
            </el-row> -->
            <el-row :gutter="15">
              <el-col>
                <el-form-item label="附件" prop="oss">
                  <image-upload v-model="form.oss"></image-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <property-data ref="propertyDrawer" v-model="formItems" :isPack="false"></property-data>
      </el-main>
      <el-footer>
        <div class="footerDivClass">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="close()">取 消</el-button>
        </div>
      </el-footer>
    </el-container>

  </div>
</template>

<script>
  import {
    initBean,
    getTask,
    addTask,
    updateTask
  } from "@/api/oms/task";
  import {
    treeselect,
  } from "@/api/system/dept";
  import {
    contacts,
  } from "@/api/oms/contacts";
  import {
    storeTreeselect,
  } from "@/api/wms/store";
  import { sendsTask } from "@/api/center/index";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    dicts:['oms_property_type','oms_out_delivery_type','wms_ex_warehouse_type'],
    components:{Treeselect},
    data(){
      return{
        form:{
          items:[],
          isTrailer:'0',
          delivery:'0',
          type:'1'

        },
        rules:{
          deptId: [{
            required: true,
            message: "单位不能为空",
            trigger: "blur"
          }],
          name: [{
            required: true,
            message: "联系人不能为空",
            trigger: "blur"
          }],
          tel: [{
            required: true,
            message: "联系方式不能为空",
            trigger: "blur"
          }],
          address: [{
            required: true,
            message: "地址不能为空",
            trigger: "blur"
          }],
          propertyType: [{
            required: true,
            message: "物证类型不能为空",
            trigger: "blur"
          }],
          delivery: [{
            required: true,
            message: "物流配送不能为空",
            trigger: "blur"
          }],
          storeId: [{
            required: true,
            message: "出库仓库不能为空",
            trigger: "blur"
          }],
          dispatchRemark: [{
            required: true,
            message: "调用原因不能为空",
            trigger: "blur"
          }],
        },

        //查询数据
        deptOptions:[],
        takeDeptOptions:[],
        storeOptions:[],
        contactsOptions:[],
        takeContactsOptions:[],
        boxOptions:[],

        formItems:[]
      }
    },
    created() {
      this.getInitBean();
      this.getTreeselect();
      this.getStoreTreeselect();
    },
    watch:{
      'form.deptId': {
        handler(newVal, oldVal) {
          if(newVal){
            this.getContacts(newVal)
          }
        },
        deep: true,
        immediate: true
      },
      'form.delivery': {
        handler(newVal, oldVal) {
          if(newVal == '1'){
            this.form.address = undefined;
          }
        },
        deep: true,
        immediate: true
      }
    },
    methods:{
      getInitBean(){
        initBean({type:'3'}).then(response=>{
          this.form = response.data;
          const id = this.$router.currentRoute.params.id;
          if(id){
            this.getInfo(id);
          }
        })
      },
      /** 查询详情 */
      getInfo(id){
        getTask(id).then(response=>{
          this.form = response.data;
          this.formItems = this.dtl2Box(this.form.items,item=>item.boxId)
        })
      },
      /** 查询申请部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },
      /** 查询部门下的联系人 */
      getContacts(deptId) {
        contacts({'deptId':deptId}).then(response => {
          this.contactsOptions = response.data
        });
      },
      /** 查询可选仓库 */
      getStoreTreeselect(){
        storeTreeselect().then(response=>{
          this.storeOptions = response.data;
        })
      },
      /** 获取联系人信息 */
      getUserMobile(e){
        this.contactsOptions.filter(item=>{
          if(item.id == e){
            this.form.name = item.name;
            this.form.tel = item.tel;
            this.form.lng = item.lng;
            this.form.lat = item.lat;
            this.form.address = item.address;
          }
        })
      },
      /** 获取联系人信息--收件人 */
      getTakeUserMobile(e){
        this.takeContactsOptions.filter(item=>{
          if(item.id == e){
            this.form.takeContacts = item.name;
            this.form.takeTel = item.tel;
            this.form.takeLng = item.lng;
            this.form.takeLat = item.lat;
            this.form.takeAddress = item.address;
          }
        })
      },
      /** 提交按钮 */
      submitForm() {
        let boxResult = this.box2Dtl(this.formItems);
        this.form.items = boxResult[0];
        this.form.boxIds = boxResult[1];
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.buttonLoading = true;
            if (this.form.id != null) {
              this.form.action = 'update';
              updateTask(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.close();
              }).finally(() => {
                this.buttonLoading = false;
              });
            } else {
              addTask(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.close();
              }).finally(() => {
                this.buttonLoading = false;
              });
            }
          }
        });
      },
      /** 关闭 */
      close(){
        const obj = {
          path: "/oms/orderDispatch/transfer?type=3",
          query: { t: Date.now(), pageNum: this.$route.query.pageNum },
        };
        this.$tab.closeOpenPage(obj);
      },
    }
  }
</script>
